<script setup lang="ts">
    import { Ckeditor } from "@ckeditor/ckeditor5-vue" //导入Ckeditor编辑器【必须】
    import { ClassicEditor, Paragraph, SpecialCharacters, Undo, Bold, Italic, Underline, MediaEmbed } from "ckeditor5" //引入插件【必须】
    import "ckeditor5/ckeditor5.css"//引入样式【必须】
    import type { EditorConfig } from "ckeditor5" //引入EditorConfig类型
    import coreTranslations from "ckeditor5/translations/zh-cn.js"//引入中文包

    //设置编辑器配置项
    const config:EditorConfig = {
        //使用GPL许可证：开源免费
        licenseKey:"GPL",
        //设置中文
        translations: [coreTranslations],
        //设置工具栏
        toolbar:{
            //工具栏选项
            items:["undo", "redo", "|", "bold", "italic", "underline"]
        },
        //设置插件
        plugins:[Paragraph, SpecialCharacters, Undo, Bold, Italic, Underline, MediaEmbed],
        //内容提示文字
        placeholder: "请填写商品简介"
    }
</script>

<template>
    <Ckeditor :editor="ClassicEditor" :config="config"></Ckeditor>
</template>

<style>
    /* 去掉编辑器右下解，在获得焦点时，显示的"POWERED BY CKEditor" */
    .ck .ck-powered-by{
        display:none !important;
    }
    /* 设置编辑器的宽高 */
    .ck-editor__editable_inline {
        height: 200px !important;
    }
    /* 设置编辑器获得焦点后的边框 */
    .ck-editor__editable:focus {
        border:1px solid #CCCED1 !important;
    }
    /* 设置编辑器获得焦点后的阴影 */
    .ck-focused {
        box-shadow: none !important; /* 移除可能的阴影效果 */
    }
</style>
